<template>
  <div class="app-container">
    <shipments-panel />
    <div class="box">
      <el-row class="row1">
        <el-col :span="12">
          <span class="titles">发货统计（公斤 / 千克）</span>
        </el-col>
        <el-col :span="12"
                align="right">
          <el-date-picker v-model="datetime"
                          align="right"
                          type="date"
                          placeholder="选择查询日期"
                          size="mini"
                          :picker-options="pickerOptions">
          </el-date-picker>
        </el-col>

      </el-row>
      <el-row>
        <line-chart :chart-data="lineChartData" />
      </el-row>
    </div>
  </div>
</template>


<script>
import { LineChart, ShipmentsPanel } from '@/components'

const lineChartData = {
  expressData: [100, 120, 161, 134, 105, 160, 165, 160, 165],
  giggitData: [120, 82, 91, 154, 162, 140, 145, 150, 130]
}
export default {
  name: 'outbound',
  components: {
    LineChart,
    ShipmentsPanel
  },
  data() {
    return {
      lineChartData: lineChartData,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      datetime: ''
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.box {
  padding: 20px 10px;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08);
}
.row1 {
  background: #fff;
  padding: 16px 36px 0;
}
.titles {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 14px;
  margin-bottom: 12px;
  //   font-weight: 600;
}
</style>